<!DOCTYPE html>
<html>
<head>
    <title>Coaxial Cable Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="600" height="450"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');

        // Parameters for the drawing
        const cx = 200;
        const cy = 220;
        const r1 = 40;
        const r2 = 80;
        const r3 = 110;
        const cylinderLength = 300;

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.fillStyle = 'black';

        // Helper function to draw an arrow
        function drawArrow(fromX, fromY, toX, toY) {
            const headlen = 10;
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            
            // Draw the line
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            
            // Draw the arrowhead
            ctx.lineTo(toX - headlen * Math.cos(angle - Math.PI / 6), toY - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headlen * Math.cos(angle + Math.PI / 6), toY - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // 1. Draw the main cylinder body
        ctx.beginPath();
        ctx.moveTo(cx, cy - r3);
        ctx.lineTo(cx + cylinderLength, cy - r3);
        ctx.arc(cx + cylinderLength, cy, r3, -Math.PI / 2, Math.PI / 2, false);
        ctx.lineTo(cx, cy + r3);
        // Do not close the path, stroke it as is to leave the left side open
        ctx.stroke();

        // 2. Draw the concentric circles on the left face
        ctx.beginPath();
        ctx.arc(cx, cy, r3, 0, 2 * Math.PI);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(cx, cy, r2, 0, 2 * Math.PI);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(cx, cy, r1, 0, 2 * Math.PI);
        ctx.stroke();

        // 3. Draw the stylistic "L" shapes and the radius arrows
        
        // R3 and its arrow
        drawArrow(cx, cy, cx, cy + r3);
        ctx.font = "italic 22px Times New Roman";
        ctx.fillText("R", cx - 25, cy + r3 + 25);
        ctx.font = "16px Times New Roman";
        ctx.fillText("3", cx - 15, cy + r3 + 30);
        
        // R2 and its related shapes
        // The arrow points to a corner of an 'L' shape in the R2-R3 annulus
        const p2_angle = -40 * Math.PI / 180;
        const p2_radius = (r2 + r3) / 2;
        const p2_x = cx + p2_radius * Math.cos(p2_angle);
        const p2_y = cy + p2_radius * Math.sin(p2_angle);
        drawArrow(cx, cy, p2_x, p2_y);

        ctx.beginPath();
        ctx.moveTo(p2_x, p2_y);
        ctx.lineTo(p2_x - 50, p2_y); // Horizontal part of 'L'
        ctx.moveTo(p2_x, p2_y);
        ctx.lineTo(p2_x, p2_y + 45); // Vertical part of 'L'
        ctx.stroke();

        ctx.font = "italic 22px Times New Roman";
        ctx.fillText("R", cx + 20, cy - 90);
        ctx.font = "16px Times New Roman";
        ctx.fillText("2", cx + 33, cy - 85);

        // R1 and its related shapes
        // The arrow points to a corner of an 'L' shape in the R1-R2 annulus
        const p1_angle = 125 * Math.PI / 180;
        const p1_radius = (r1 + r2) / 2;
        const p1_x = cx + p1_radius * Math.cos(p1_angle);
        const p1_y = cy + p1_radius * Math.sin(p1_angle);
        drawArrow(cx, cy, p1_x, p1_y);
        
        ctx.beginPath();
        ctx.moveTo(p1_x, p1_y);
        ctx.lineTo(p1_x + 40, p1_y); // Horizontal part of 'L'
        ctx.moveTo(p1_x, p1_y);
        ctx.lineTo(p1_x, p1_y + 40); // Vertical part of 'L'
        ctx.stroke();
        
        ctx.font = "italic 22px Times New Roman";
        ctx.fillText("R", cx - 80, cy - 50);
        ctx.font = "16px Times New Roman";
        ctx.fillText("1", cx - 69, cy - 45);
        
        // 4. Draw the caption text
        ctx.font = "22px KaiTi"; // A common Chinese font
        ctx.fillText("题 7 图", cx + 80, cy + r3 + 60);

    </script>
</body>
</html>